<template>
	<card cardHeight="300px" noHeader class="flex-1">
		<!-- <div class="flex flex-align-center " style="height: 100%;position: relative;" ref="mapbox">
			<div
				style="position: absolute;"
				:style="{
					top: 50 * pageScale + 'px',
					left: 60 * pageScale + 'px'
				}"
			>
				<count :pageScale="pageScale"></count>
			</div>
			<div class="map" ref="map"><point v-for="(item, index) in pointList" :key="index" :item="item"></point></div>
		</div> -->
	</card>
</template>

<script>
import StatisticsMixins from '../StatisticsMixins';
// import count from './count';
// import point from './point';
// * 默认缩放值
const scale = {
	width: '1',
	height: '1'
};
// * 设计稿尺寸（px）
const baseWidth = 7404 * 0.1;
const baseHeight = 5374 * 0.1;

// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
const TownshipEnum = [
	{
		text: '米贝苗族乡',
		point: {
			top: '55%',
			left: '85%'
		}
	},
	{
		text: '步头降苗族乡',
		point: {
			top: '35%',
			left: '85%'
		}
	},
	{
		text: '禾滩镇',
		point: {
			top: '42%',
			left: '65%'
		}
	},
	{
		text: '贡溪镇',
		point: {
			top: '75%',
			left: '55%'
		}
	},
	{
		text: '林冲镇',
		point: {
			top: '50%',
			left: '35%'
		}
	},
	{
		text: '中寨镇',
		point: {
			top: '56%',
			left: '70%'
		}
	},
	{
		text: '扶罗镇',
		point: {
			top: '60%',
			left: '50%'
		}
	},
	{
		text: '凉伞镇',
		point: {
			top: '75%',
			left: '25%'
		}
	},
	{
		text: '鱼市镇',
		point: {
			top: '40%',
			left: '45%'
		}
	},
	{
		text: '波洲镇',
		point: {
			top: '20%',
			left: '75%'
		}
	},
	{
		text: '晃洲镇',
		point: {
			top: '20%',
			left: '60%'
		}
	}
];
/* 乡镇数据 */
export default {
	name: 'mapbox',
	data() {
		return {
			pointList: []
		};
	},
	// components: { count, point },
	mixins: [StatisticsMixins],
	props: {
		pageScale: {
			type: [String, Number],
			default: 1
		}
	},
	methods: {
		calcRate() {
			const mapbox = this.$refs['mapbox'];
			const map = this.$refs['map'];
			if (!mapbox) return;
			// // 当前宽高比
			const currentRate = parseFloat((mapbox.offsetWidth / mapbox.offsetHeight).toFixed(5));
			if (map) {
				if (currentRate > baseProportion) {
					// 表示更宽
					scale.width = ((mapbox.offsetHeight * baseProportion) / baseWidth).toFixed(5);
					scale.height = (mapbox.offsetHeight / baseHeight).toFixed(5);
					map.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
				} else {
					// 表示更高
					scale.height = (mapbox.offsetWidth / baseProportion / baseHeight).toFixed(5);
					scale.width = (mapbox.offsetWidth / baseWidth).toFixed(5);
					map.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
				}
			}
		},
		getInfo() {
			this.$postAction(this.dashboardApi.headOfficeUrl.getmapInfo, {
				orgId: this.globalOrgId
			}).then(da => {
				if (da.code == 1) {
					let info = da.data;
					let list = [];
					console.log('地图信息', info);
					for (var i = 0; i < info.length; i++) {
						if (info[i].geo && info[i].geo.split(',')[3]) {
							let add = info[i].geo.split(',')[3];
							console.log('add', add);
							let point = TownshipEnum.find(item => item.text == add);
							console.log(info[i].subDeptName.indexOf('黄雷'), info[i].subDeptName);
							if (info[i].subDeptName.indexOf('黄雷') > -1) {
								point = {
									text: '凉伞镇',
									point: {
										top: '55%',
										left: '25%'
									}
								};
							}
							if (point) {
								list.push({
									...info[i],
									...point
								});
							}
							this.pointList = [...list];
						}
					}
				}
			});
		}
	}
};
</script>

<style>
.map {
	width: 740px;
	height: 537px;
	background: url(/home/map.png) no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: left top;
	overflow: hidden;
}
</style>
